@section('beforeScript')
    <script>
        var code_url = '{{ $code_url }}';
    </script>
@endsection

@section('content')
    @if(1)
        <div class="block sm:hidden message top-swiping w-full bg-white absolute top-0 py-2 text-center" style="background-color: {{ $bgcolor }};">
            <span class="text-white text-sm">
                长按二维码保存至手机打开App继续支付
            </span>
        </div>
    @endif
    <div class="md:max-w-lg sm:max-w-full p-4 m-auto mt-10">
        <div class="bg-white rounded-t-lg w-full shadow-lg p-5">
            <div class="flex items-center justify-center">
                @if($order->gateway === \App\Models\Order::GATEWAY_QQ)
                <svg t="1617118264735" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8561" width="32" height="32"><path d="M511.500488 512.499512m-511.500488 0a511.500488 511.500488 0 1 0 1023.000976 0 511.500488 511.500488 0 1 0-1023.000976 0Z" fill="#1BC1FA" p-id="8562"></path><path d="M784.234146 572.440976c8.178014 0 16.273108 0.253752 24.282287 0.728288-16.961436-38.434466-42.247742-69.886751-58.977405-90.331785 2.822244-8.482716 11.30496-56.536788-25.443153-90.453666v-2.827239c0-132.850263-96.103149-231.785647-214.822213-231.785647-118.717065 0-214.82521 96.107145-214.825209 231.785647v2.827239c-33.915879 33.915879-25.437159 81.969951-19.782681 90.453666-25.444152 28.265397-73.49223 87.62343-76.320469 155.461182 0 16.961436 2.827239 45.226833 11.305959 56.531794 11.305959 14.133198 39.570357-2.827239 62.186272-48.054073 5.650482 19.788675 19.78368 53.709549 50.876316 93.281905-50.876316 11.302962-65.009514 62.186271-48.049077 90.450669 11.305959 19.788675 39.570357 33.920874 87.624429 33.920874 78.496343 0 115.815899-19.378076 134.378771-35.711126C492.644901 814.680414 490.520976 800.136617 490.520976 785.233171c0-117.522232 131.500581-212.792195 293.71317-212.792195z" fill="#FFFFFF" p-id="8563"></path><path d="M514.925143 819.204995c5.654478 0 11.309955 2.82624 14.132199 5.649483 16.960437 16.960437 53.709549 39.575352 138.50674 39.575352 48.054072 0 76.320468-16.960437 87.625428-33.920874 16.960437-28.264398 2.827239-79.147707-48.054072-90.450669 31.092636-39.572355 45.225834-73.493229 50.881311-93.281905 19.787676 45.226833 50.881311 62.18727 62.186271 48.054073 2.827239-11.30496 5.650482-39.570357 5.650482-56.531794-1.93511-23.223321-8.508691-45.121936-17.337069-65.128398-8.009179-0.475536-16.104273-0.729288-24.282287-0.729287-162.212589 0-293.713171 95.269963-293.71317 212.792195 0 14.903446 2.123926 29.447243 6.147996 43.485533a88.18688 88.18688 0 0 0 4.122973-3.864226c2.827239-2.823243 8.481717-5.649483 14.133198-5.649483z" fill="#FFFFFF" opacity=".4" p-id="8564"></path></svg>
                @elseif ($order->gateway === \App\Models\Order::GATEWAY_WECHAT)
                <svg t="1617028122665" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1764" width="32" height="32"><path d="M857.6 0H165.888C74.24 0 0 74.24 0 166.4v691.2c0 92.16 74.24 166.4 165.888 166.4h692.224c91.648 0 165.888-74.24 165.888-166.4v-691.2c-0.512-92.16-74.752-166.4-166.4-166.4zM384 686.08c-38.4 0-69.632-7.68-108.544-15.872l-108.544 54.272 31.232-93.184c-77.824-54.272-123.904-123.904-123.904-209.92 0-147.968 139.776-264.192 310.784-264.192 152.576 0 286.208 93.184 312.832 218.112-10.24-1.024-19.456-1.536-30.208-1.536-147.456 0-264.192 110.08-264.192 245.76 0 22.528 3.584 44.544 9.728 65.024-9.728 1.024-19.456 1.536-29.184 1.536z m457.728 108.544l23.04 77.824-84.992-46.592c-31.232 7.68-62.464 15.872-93.184 15.872-147.968 0-264.192-100.864-264.192-225.28 0-123.904 116.224-225.28 264.192-225.28 139.776 0 263.68 101.376 263.68 225.28 0.512 69.632-46.08 131.584-108.544 178.176z" p-id="1765" fill="#49c265"></path><path d="M237.568 323.072c0 12.288 5.12 24.064 13.312 32.768 8.704 8.704 20.48 13.312 32.768 13.312 12.288 0 24.064-5.12 32.768-13.312 8.704-8.704 13.312-20.992 13.312-32.768 0-12.288-5.12-24.064-13.312-32.768-8.704-8.704-20.992-13.312-32.768-13.312-12.288 0-24.064 5.12-32.768 13.312-8.704 8.704-13.312 20.992-13.312 32.768zM462.336 323.072c0 12.288 5.12 24.064 13.312 32.768s20.992 13.312 32.768 13.312c12.288 0 24.064-5.12 32.768-13.312 8.704-8.704 13.312-20.992 13.312-32.768 0-12.288-5.12-24.064-13.312-32.768-8.704-8.704-20.992-13.312-32.768-13.312-12.288 0-24.064 5.12-32.768 13.312-8.192 8.704-13.312 20.992-13.312 32.768zM574.464 547.328c0 9.216 3.584 18.432 10.752 25.088 6.656 6.144 15.872 10.24 25.088 10.24s18.432-3.584 25.088-10.24c6.656-6.144 10.752-15.872 10.752-25.088s-3.584-18.432-10.752-25.088c-6.656-6.144-15.872-10.24-25.088-10.24s-18.432 3.584-25.088 10.24c-6.656 6.656-10.752 15.872-10.752 25.088zM737.28 547.328c0 9.216 3.584 18.432 10.752 25.088 6.656 6.144 15.872 10.24 25.088 10.24s18.432-3.584 25.088-10.24c6.656-6.144 10.752-15.872 10.752-25.088s-3.584-18.432-10.752-25.088c-6.656-6.144-15.872-10.24-25.088-10.24s-18.432 3.584-25.088 10.24c-6.656 6.656-10.752 15.872-10.752 25.088z" p-id="1766" fill="#49c265"></path></svg>
                @endif
                <span class="text-2xl ml-3">{{ $payment }}支付</span>
            </div>
            <div class="text-center mt-4">
                <span>商品名称：{{ $order->title ?? '订单支付 - ' . $order->trade_no }}</span>
            </div>
            <div class="text-center mt-2">
                <span>¥ <span class="text-red-600 font-semibold text-xl">{{ $order->total_amount }}</span></span>
            </div>
            <div class="mt-4 mx-8 md:mx-16 p-6 border border-gray-200 rounded-lg relative">
                <div class="w-full mx-auto" id="qrcode"></div>
                <div class="absolute top-0 left-0 w-full h-full bg-white message top-swiping rounded-lg hidden" id="pay-success">
                    <div class="w-full h-full flex items-center justify-center">
                        <div>
                            <div class="flex justify-center w-full">
                                <svg t="1617372902557" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14002" width="64" height="64">
                                    <path d="M511.872032 1024a511.872032 511.872032 0 1 1 511.872032-511.872032 511.872032 511.872032 0 0 1-511.872032 511.872032z m-114.147463-310.962259a53.490627 53.490627 0 0 0 75.501125 0l323.247188-323.247189a53.490627 53.490627 0 0 0-75.501125-76.780804L433.043739 597.610597l-127.968008-127.968008a53.490627 53.490627 0 1 0-76.780805 75.501125z" fill="#49c265" p-id="14003"></path>
                                </svg>
                            </div>
                            <div class="text-center mt-2">
                                <span class="text-4xl">支付成功</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full text-sm mt-4 text-center">
                <span>{{ $order->out_trade_no }}</span>
            </div>
        </div>
        <div class="w-full p-5 flex items-center rounded-b-lg shadow-lg" style="background-color: {{ $bgcolor }};">
            <div class="w-2/5">
                <svg class="mx-auto" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2859" width="42" height="42"><path d="M657.8 677V561.9h-19.3V677h19.3zM388.3 272.2H369v174h19.3v-174z m-269.4 0.6c10.6 0 19.2-8.6 19.2-19.2 0-0.2-0.1-0.3-0.1-0.5v-76.5c0-21.3 17.2-38.5 38.5-38.5h50.4v-0.1h7.9c0.2 0 0.3 0.1 0.5 0.1 10.6 0 19.2-8.6 19.2-19.2s-8.6-19.3-19.2-19.3v-0.1h-63.6v0.1h-14.4c-31.9 0-57.8 25.9-57.8 57.8v96.2h0.1c0 10.6 8.6 19.2 19.3 19.2z m-0.8 250.1H909c10.5 0 19-8.5 19-19s-8.5-19-19-19H118.1c-10.5 0-19 8.5-19 19s8.5 19 19 19zM734.8 677V561.9h-19.4V677h19.4zM214.9 446.2h38.7v-174h-38.7v174z m96.4-174h-19.4v174h19.4v-174z m500.5 0h-38.7v174h38.7v-174zM793.2 138c0.2 0 0.3-0.1 0.5-0.1h25.9v0.1h30.9c21.3 0 38.5 17.2 38.5 38.5V253c0 0.2-0.1 0.3-0.1 0.5 0 10.6 8.6 19.2 19.2 19.2s19.3-8.6 19.3-19.2h0.1v-96.2c0-31.9-25.9-57.8-57.8-57.8h-13v-0.1h-63.6v0.1c-10.6 0-19.2 8.6-19.2 19.3 0 10.6 8.6 19.2 19.3 19.2z m-58.4 134.2h-19.4v174h19.4v-174z m-250 0H427v174h57.8v-174z m115.3 0h-38.7v174h38.7v-174z m57.7 0h-19.3v174h19.3v-174zM427 677h57.8V561.9H427V677z m192.5 76.9H658v-39.1h-38.5v39.1z m-365.9 0.7V561.9h-38.7v192.8h38.7zM561.4 677h38.7V561.9h-38.7V677z m346.8 77c-10.6 0-19.2 8.6-19.2 19.2 0 0.2 0.1 0.3 0.1 0.5v76.5c0 19.1-14 34.9-32.3 37.9v-0.4h-63.6v0.1c-10.6 0-19.2 8.6-19.2 19.3 0 10.6 8.6 19.2 19.2 19.2 0.2 0 0.3-0.1 0.5-0.1h25.9v1h50.1c31.9 0 57.8-25.9 57.8-57.8v-96.2h-0.1c0-10.5-8.6-19.2-19.2-19.2z m-96.4-192.1h-38.7v192.8h38.7V561.9zM523 753.9h38.5v-39.1H523v39.1z m173.5 0H735v-39.1h-38.5v39.1z m-385.2-192h-19.4V677h19.4V561.9z m134.9 192h38.5v-39.1h-38.5v39.1z m-210.9 134v-0.1h-63.6v0.6c-19-2.4-33.7-18.4-33.7-38v-76.5c0-0.2 0.1-0.3 0.1-0.5 0-10.6-8.6-19.2-19.2-19.2s-19.3 8.6-19.3 19.2h-0.1v96.2c0 31.9 25.9 57.8 57.8 57.8h69.6v-1h7.9c0.2 0 0.3 0.1 0.5 0.1 10.6 0 19.2-8.6 19.2-19.2 0-10.8-8.6-19.4-19.2-19.4z m56.9-134h38.5v-39.1h-38.5v39.1z m77 0h38.5v-39.1h-38.5v39.1z m19.1-192H369V677h19.3V561.9z" p-id="2860" fill="#ffffff"></path></svg>
            </div>
            <div class="flex-fill text-white text-12 font-sans font-black">
                <p>请使用{{ $payment }}扫一扫</p>
                <p>扫描二维码支付</p>
            </div>
        </div>
    </div>
@endsection

@section('afterScript')
    <script src="/static/js/qrcode.min.js"></script>
    <script>
        // 禁止滚动
        function preventDefault(e) {
            e.preventDefault();
        }
        document.addEventListener('touchmove', preventDefault, {passive: false});

        new QRCode('qrcode', {
            text:code_url,
            width:300,
            height:300,
            colorDark : "#000000",
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H
        });

        (function () {
            setInterval(function () {
                axios.get('{{ route('pay.status', ['order' => $order->trade_no]) }}')
                    .then(function (res) {
                        if (res.status == 200) {
                            var status = res.data.status;
                            if (status == '{{ \App\Models\Order::STATUS_PAID }}') {
                                $('#pay-success').show();
                                @if(! is_null($order->return_url))
                                setTimeout(function () {
                                    window.location.href = '{{ route('pay.return', ['gateway' => $order->gateway, 'order' => $order->trade_no]) }}';
                                }, 1500);
                                @endif
                            }
                        }
                    })
                    .catch(function () {

                    });
            }, 1000);
        })();
    </script>
    @if(is_mobile() && \App\Models\Order::GATEWAY_QQ === $order->gateway)
        <script>
            (function () {
                var isSafari = navigator.userAgent.indexOf("Safari") > -1;
                var	tencentSeries = 'mqqapi://forward/url?src_type=web&style=default&=1&version=1&url_prefix='+window.btoa(code_url);
                if (isSafari) {
                    location.href = tencentSeries;
                } else {
                    var iframe = document.createElement("iframe");
                    iframe.style.display = "none";
                    iframe.src = tencentSeries;
                    document.body.appendChild(iframe);
                }
                document.getElementById("openUrl").href = tencentSeries;
            })();
        </script>
    @endif
@endsection
